<div class="top-banner section banner">
  <div class="container">
    <div class="row">
      <div class="col">
        <h3 class="header center-on-small-only">{{pageTitle}}</h3>
      </div>
    </div>
  </div>
</div>
<div class="section" *ngIf="deprecated">
  <div class="section red white-text">
    <div class="container">
      This section has been marked as deprecated. It is listed here for documentation purposes only. <a
        routerLink="/faq">Read More</a>
    </div>
  </div>
</div>

<!--
  The "Deprecated" section is not visible in DT v2.
  Hence, we don't need to show additional banner on top of the "deprecated" banner.
-->
<div class="section" *ngIf="dtVersion == 'v1' && !deprecated">
  <div class="container red white-text dtv1-notice">
    You are viewing documentation for v1.x of datatables.net. This version is not supported anymore since v17.1.0. It is listed here for documentation purposes only.
  </div>
</div>

<div class="container">

  <h5 class="header">Description</h5>
  <p class="caption">
    <markdown [src]="mdIntro"></markdown>
  </p>

  <!-- Tabs -->
  <div class="row">
    <div class="col s12">
      <ul class="tabs tabs-fixed-width grey darken-1 z-depth-1">
        <li class="tab col">
          <a href="#previewTab">Preview</a>
        </li>
        <li class="tab col" *ngIf="dtVersion == 'v2' ? mdInstall.length>0 : mdInstallV1.length>0">
          <a href="#installTab">Installation</a>
        </li>
        <li class="tab col">
          <a href="#htmlTab">HTML</a>
        </li>
        <li class="tab col">
          <a href="#typescriptTab">TS</a>
        </li>
      </ul>
    </div>

    <!-- Preview -->
    <div id="previewTab" class="col s12">
      <ng-container *ngTemplateOutlet="template"></ng-container>
    </div>

    <!-- Installation -->
    <div id="installTab" class="col s12" *ngIf="mdInstall.length > 0 || mdInstallV1.length > 0">
      <markdown [src]="dtVersion == 'v2' && mdInstall.length > 0 ? mdInstall : mdInstallV1"></markdown>
    </div>

    <!-- HTML -->
    <div id="htmlTab" class="col s12">
      <markdown [src]="mdHTML"></markdown>
    </div>

    <div id="typescriptTab" class="col s12">
      <markdown [src]="dtVersion == 'v2' && mdTS.length > 0 ? mdTS : mdTSV1"></markdown>
    </div>
  </div>
</div>

<!-- Back to Top -->
<div id="toTop">
  <i class="material-icons">arrow_upward</i>
</div>
